<template>
  <!-- pages/chat/chat.wxml -->
  <!-- <web-view src="{{url}}"></web-view> -->
  <view class="container">
    <!--  -->
    <view :class="'coversation ' + (pdbot ? 'pdbot' : '')" id="j_page">
      <template v-for="(item, index) in loadingList.data">
        <view class="date_box_b">
          <view class="date_box">{{ item.time }}</view>
        </view>

        <template v-for="(item2, index1) in item.data">
          <view v-if="item2.send_user_id==receive_user_id" class="kefu_box clearfix">
            <view class="kefu_imgbox clearfix">
              <image :src="item2.senduser.avatar"></image>
            </view>

            <view v-if="item2.chat_type == 1" class="kefu_dialog clearfix">
              <template v-for="(item3, index2) in item2.content_text">
                <template v-if="item3.type == 1">
                  <text style="white-space: pre-wrap">{{ item3.value }}</text>
                </template>

                <template v-else>
                  <image class="emoji" :src="item3.value"></image>
                </template>
              </template>
            </view>
            <view v-else-if="item2.chat_type == 2" class="kefu_dialog clearfix" style="padding: 0">
              <image class="file_pics" @tap="previewImg" :data-url="item2.content_text" :lazy-load="true"
                     :src="item2.content_text"></image>
            </view>
            <view v-else-if="item2.chat_type == 3" class="kefu_dialog clearfix" style="background: #fff;max-width: 590rpx;width: 590rpx;">
              <navigator class="houseitem df"
                         :url="'/pages/house/building_detail/building_detail?id=' + item2.content_text.id">
                <view class="houseimgbox">
                  <image :src="item2.content_text.image_text" class="houseimg" mode="aspectFill">
                  </image>
                  <view v-if="item2.content_text.house_tag_ids_text1" class="label_box">
                    {{ item2.content_text.house_tag_ids_text1 }}
                  </view>
                </view>
                <view class="flex-grow-1">
                  <view class="flex-box" style="padding-bottom: 10rpx">
                    <view class="flex-box flex-grow-1">
                      <view class="housename m-ellipsis">{{ item2.content_text.name }}</view>
                    </view>
                  </view>
                  <view class="area-size">
                    <text>
                      {{ item2.content_text.region }}{{ item2.content_text.alias_name ? item2.content_text.alias_name : '' }}|建面{{ item2.content_text.min_space }}㎡-{{item2.content_text.max_space}}㎡
                    </text>
                  </view>
                  <view v-if="item2.content_text.house_tag_ids_text_arr2" class="targetbox">
                    <view class="targetitem"
                          v-for="(targets, index2) in item2.content_text.house_tag_ids_text_arr2"
                          :key="index2">
                      {{ targets }}
                    </view>
                  </view>
                  <view class="housecost">
                    <text>{{ item2.content_text.min_total_price }}万起</text>
                    {{ item2.content_text.first_price_msg ? item2.content_text.first_price_msg : '' }}
                  </view>
                </view>
              </navigator>
            </view>

            <view v-else-if="item2.chat_type == 4" class="user_dialog clearfix"
                  style="background: #fff;max-width: 590rpx;width: 590rpx;">
              <navigator class="houseitem df"
                         :url="'/pages/rental/renting/renting?id=' + item2.content_text.id">
                <view class="houseimgbox">
                  <image :src="item2.content_text.image_text" class="houseimg" mode="aspectFill">
                  </image>
                </view>
                <view class="flex-grow-1">
                  <view class="flex-box" style="padding-bottom: 10rpx">
                    <view class="flex-box flex-grow-1">
                      <view class="housename m-ellipsis">{{ item2.content_text.name }}</view>
                    </view>
                  </view>
                  <view class="area-size">
                    <text>{{ item2.content_text.city }} {{ item2.content_text.region }} |{{ item2.content_text.space }}㎡
                    </text>
                  </view>
                  <view class="targetbox">
                    <view class="targetitem"
                          v-for="(targets, index2) in item2.content_text.house_type_id_text"
                          :key="index2">
                      {{ targets }}
                    </view>
                  </view>
                  <view class="housecost">
                    <text style="display: block">{{ item2.content_text.price }}</text>
                  </view>
                </view>
              </navigator>
            </view>

          </view>

          <view v-else class="user_box clearfix">
            <view class="user_imgbox clearfix">
              <image :src="item2.senduser.avatar"></image>
            </view>
            <view v-if="item2.chat_type == 1" class="user_dialog clearfix">
              <template v-for="(item3, index2) in item2.content_text">
                <template v-if="item3.type == 1">
                  <text style="white-space: pre-wrap">{{ item3.value }}</text>
                </template>

                <template v-else>
                  <image class="emoji" :src="item3.value"></image>
                </template>
              </template>
            </view>
            <view v-else-if="item2.chat_type == 2" class="user_dialog clearfix" style="padding: 0">
              <image class="file_pics" @tap="previewImg" :data-url="item2.content_text" :lazy-load="true"
                     :src="item2.content_text"></image>
            </view>
            <view v-else-if="item2.chat_type == 3" class="user_dialog clearfix" style="background: #fff;max-width: 590rpx;width: 590rpx;">
              <navigator class="houseitem df"
                         :url="'/pages/house/building_detail/building_detail?id=' + item2.content_text.id">
                <view class="houseimgbox">
                  <image :src="item2.content_text.image_text" class="houseimg" mode="aspectFill">
                  </image>
                  <view v-if="item2.content_text.house_tag_ids_text1" class="label_box">
                    {{ item2.content_text.house_tag_ids_text1 }}</view>
                </view>
                <view class="flex-grow-1">
                  <view class="flex-box" style="padding-bottom: 10rpx">
                    <view class="flex-box flex-grow-1">
                      <view class="housename m-ellipsis">{{ item2.content_text.name }}</view>
                    </view>
                  </view>
                  <view class="area-size">
                    <text>{{ item2.content_text.region }}{{ item2.content_text.alias_name ? item2.content_text.alias_name : '' }} | 建面{{ item2.content_text.min_space }}㎡-{{item2.content_text.max_space}}㎡
                    </text>
                  </view>
                  <view class="targetbox">
                    <view class="targetitem"
                          v-for="(targets, index2) in item2.content_text.house_tag_ids_text_arr2"
                          :key="index2">
                      {{ targets }}
                    </view>
                  </view>
                  <view class="housecost">
                    <text style="display: block">{{ item2.content_text.min_total_price }}万起</text>
                    {{ item2.content_text.first_price_msg ? item2.content_text.first_price_msg : '' }}
                  </view>
                </view>
              </navigator>
            </view>

            <view v-else-if="item2.chat_type == 4" class="user_dialog clearfix"
                  style="background: #fff;max-width: 590rpx;width: 590rpx;">
              <navigator class="houseitem df"
                         :url="'/pages/rental/renting/renting?id=' + item2.content_text.id">
                <view class="houseimgbox">
                  <image :src="item2.content_text.image_text" class="houseimg" mode="aspectFill">
                  </image>
                </view>
                <view class="flex-grow-1">
                  <view class="flex-box" style="padding-bottom: 10rpx">
                    <view class="flex-box flex-grow-1">
                      <view class="housename m-ellipsis">{{ item2.content_text.name }} 111111
                      </view>
                    </view>
                  </view>
                  <view class="area-size">
                    <text>{{ item2.content_text.city }} {{ item2.content_text.region }} |{{ item2.content_text.space }}㎡
                    </text>
                  </view>
                  <view class="targetbox">
                    <view class="targetitem"
                          v-for="(targets, index2) in item2.content_text.house_type_id_text"
                          :key="index2">
                      {{ targets }}
                    </view>
                  </view>
                  <view class="housecost">
                    <text style="display: block">{{ item2.content_text.price }}</text>
                  </view>
                </view>
              </navigator>
            </view>

          </view>
        </template>
      </template>
    </view>

    <view class="bottom">
      <view class="shuru_box">
        <view class="changyong" @tap="showchangyongFun">常用语</view>
        <view class="input_box df ac jc">
          <!-- <input placeholder-class="placeholder" placeholder="请输入"></input> -->
          <textarea style="width: 100%; height: 64rpx; line-height: 64rpx" placeholder-class="placeholder"
                    placeholder="请输入" maxlength="500" @blur="changeCursor" @input="messageFuc"
                    :value="message"></textarea>
        </view>
        <button @tap="showemotionsFuc" hover-class="none">
          <image src="/static/icon/icon-7.png" class="icon_add"></image>
        </button>
        <button v-if="message.length == 0" hover-class="none" @tap="upload">
          <image src="/static/icon/icon-6.png" class="icon_send"></image>
        </button>
        <view v-if="message.length != 0" class="changyong" @tap="sendMessage">发送</view>
      </view>
      <view class="changyonglist" v-if="showchangyong">
        <view @tap="sendChangyongyu" :data-msg="item.name" class="changyongitem"
              v-for="(item, index) in words_arr">{{ item.name }}</view>
      </view>
      <view class="emotionslist df flexwa" v-if="showemotions">
        <image class="emotion" @tap="sendEmotion" :data-msg="item.name" :src="item.image"
               v-for="(item, index) in emotion_json"></image>
      </view>
    </view>
  </view>
</template>

<script>
// pages/chat/chat.js
const app = getApp();
const functions = require('../../../utils/functions.js');

export default {
  data() {
    return {
      receive_user_id: 0,
      session_id: 0,
      // record_list: [],
      // page: 1,
      // next_page: 1,
      emotion_json: [],
      words_arr: [],

      // url:'',
      showchangyong: false,

      showemotions: false,
      pdbot: false,

      // //底部padding
      // left_user: null,

      // right_user: null,
      all_img_arr: [],
      message: '',
      now_cursor: 0,
      is_init: false,
      scroll_timer: null,
      // tmp_msg: null,
      // tmp_msg_arr: [],
      // targets: [],

      loadingList: {
        total: 0,
        current_page: 0,
        last_page: 1,
        data: []
      },
    };
  },
  onLoad: function(options) {
    var that = this;

    var receive_user_id = options.receive_user_id || 1;
    const autoReplay = app.globalData.config.auto_reply_content

    if(autoReplay){
		this.loadingList.data.push(   {
            'time':this.formatCurrentTime(),
            data:[
              {
                send_user_id:receive_user_id,
				senduser:{
					avatar:app.globalData.config.kefu_pic
				},
                chat_type:1,
                content_text:[
                  {
                    'type':1,
                    'value':autoReplay
                  }
                ]
              }
            ]
          })
    }
    var session_id = options.session_id || 0;
    // 获取聊天列表
    this.receive_user_id = receive_user_id;
    this.session_id = session_id;
    this.emotion_json = app.globalData.chat_config.ortherdata.chat_memes;
    this.words_arr = app.globalData.chat_config.ortherdata.chat_words;
    app.get_msg_list(session_id, receive_user_id, 1);


    if (options.house_id && options.house_id > 0) {
      let house_type = options.house_type || 'building';
      app.sendMessage(receive_user_id, this.session_id, options.house_id, house_type == 'building' ? 3 : 4);
    }
  },
  onShow: function() {
    var that = this;
    uni.$on('msg_list_callback', function(data) {
      console.log(data, 'chat')
      that.msg_list(data);
    })
    uni.$on('new_msg_callback', function(data) {
      that.new_msg(data);
    })
  },
  onUnload: function() {
    uni.$off('new_msg_callback')
    uni.$off('msg_list_callback')
  },
  onHide: function() {
    uni.$off('new_msg_callback')
    uni.$off('msg_list_callback')
  },
  onReady: function() {
    var that = this;

    if (!this.is_init) {
      var scroll_timer = setInterval(function() {
        that.pageScrollToBottom();
        that.is_init = true
        clearInterval(that.scroll_timer);
      }, 500);

      that.scroll_timer = scroll_timer;
    }
  },
  onPageScroll: function(res) {
    if (res.scrollTop == 0 && this.loadingList.current_page < this.loadingList.last_page && this.loadingList
        .current_page != 0) {
      app.get_msg_list(this.session_id, this.receive_user_id, this.loadingList.current_page + 1);
    }
  },
  onReachBottom: function() {
    clearInterval(this.scroll_timer);
  },
  methods: {
	   formatCurrentTime() {
	        const now = new Date();
	        const year = now.getFullYear();
	        const month = this.padNumber(now.getMonth() + 1);
	        const day = this.padNumber(now.getDate());
	        const hours = this.padNumber(now.getHours());
	        const minutes = this.padNumber(now.getMinutes());
	        const seconds = this.padNumber(now.getSeconds());
	        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	      },
		      padNumber(num) {
		        return num < 10 ? '0' + num : num;
		      },
    showchangyongFun() {
      console.log('showchangyongFun');
      this.showchangyong = !this.showchangyong;
      this.showemotions = false;

      if (this.showchangyong || this.showemotions) {
        this.pdbot = true;
      } else {
        this.pdbot = false;
      }
    },

    showemotionsFuc() {
      this.showemotions = !this.showemotions;
      this.showchangyong = false;
      this.pdbot = true;
      if (this.showchangyong || this.showemotions) {
        this.pdbot = true;
      } else {
        this.pdbot = false;
      }
    },

    // 发送消息
    sendMessage() {
      var that = this;
      app.sendMessage(this.receive_user_id, this.session_id, this.message, 1);
      this.message = '';
    },

    // 上传图片
    upload() {
      var that = this;
      functions.chooseImg(9, function(res) {
        app.sendMessage(that.receive_user_id, that.session_id, res.url, 2);
      });
    },

    // 图片预览
    previewImg(e) {
      uni.previewImage({
        current: e.currentTarget.dataset.url,
        // 当前显示图片的http链接
        urls: this.all_img_arr // 需要预览的图片http链接列表
      });
    },

    changeCursor(e) {
      this.now_cursor = e.detail.cursor;
    },

    messageFuc(e) {
      //console.log(e);
      this.now_cursor = e.detail.cursor;
      this.message = e.detail.value;
    },

    sendEmotion(e) {
      var text = e.currentTarget.dataset.msg;
      var now_cursor = this.now_cursor;
      var message = insertStr(this.message, now_cursor, text);
      now_cursor = Number(now_cursor) + Number(text.length);
      this.now_cursor = now_cursor;
      this.message = message;
    },

    sendChangyongyu(e) {
      var msg = e.currentTarget.dataset.msg;
      app.sendMessage(this.receive_user_id, this.session_id, msg, 1);
    },

    changeEmotion: function(contents) {
      var emotions = this.emotion_json;
      var pattern1 = /\[[\u4e00-\u9fa5]+\]/g;
      var pattern2 = /\[[\u4e00-\u9fa5]+\]/;

      if (contents) {
        contents = contents.replace(new RegExp(/\<br>/, 'g'), '\n');
        contents = contents.replace(new RegExp(/\<br\/>/, 'g'), '\n');
      }

      var content = contents.match(pattern1);
      var web_url = app.globalData.web_url;
      var str = contents;
      var now_str = contents; // console.log(content);

      var arr = [];

      if (content == null) {
        return [{
          type: 1,
          value: str
        }];
      }

      for (var i = 0; i < content.length; i++) {
        var src = '';

        for (var j = 0; j < emotions.length; j++) {
          if (emotions[j].text == content[i]) {
            // src = "<image style='height:20rpx;width:20rpx' class='aui-inline' src='"+web_url+"/assets/addons/fastchat/emotion/"+emotions[j].name+".png'></image>";
            src = web_url + '/assets/addons/fastchat/emotion/' + emotions[j].name +
                '/static/pages/chat/chat/.png';
            break;
          }
        }

        if (!now_str) {
          break;
        } // var tmp_arr = now_str.split(content[i]);
        // tmp_arr.forEach(element => {

        var has_i = now_str.indexOf(content[i]);

        if (has_i != -1) {
          arr.push({
            type: 1,
            value: now_str.substring(0, Number(has_i))
          });
          arr.push({
            type: 2,
            value: src
          });
          now_str = now_str.substring(Number(has_i) + Number(content[i].length));

          if (i == content.length - 1) {
            arr.push({
              type: 1,
              value: now_str
            });
          }
        } // })
        // str = str.replace(pattern2, src);
      }

      return arr;
    },

    // 获取聊天列表
    msg_list(res) {
      console.log(res.data.data);
      var loadingList = res.data;
      if (this.loadingList.current_page > 1) {
        var now_loadingList_data = this.loadingList.data || [];
        var now_loadingList_data = now_loadingList_data.concat(loadingList.data);
        loadingList.data = now_loadingList_data;
      }
      var all_img_arr = this.all_img_arr || [];
      all_img_arr = all_img_arr.concat(res.images_arr);
      this.loadingList = loadingList;
      this.all_img_arr = all_img_arr;
      this.receive_user_id = res.receive_user ? res.receive_user.id : 0;
      app.ws_send({
        type: 'setread',
        session_id: this.session_id,
        receive_user_id: this.receive_user_id
      });
    },
    // 新消息
    new_msg(data) {
      if (data.receive_user_id != this.receive_user_id && data.send_user_id != this.receive_user_id) {
        return false;
      }
      var loadingList = this.loadingList;
      var now_loadingList_data = loadingList.data || [];
      var ret = app.handle_msg_data(data);
      var now_loadingList_data = now_loadingList_data.concat(ret.data);
      loadingList.data = now_loadingList_data;
      var all_img_arr = this.all_img_arr || [];
      all_img_arr = all_img_arr.concat(ret.images_arr);
      this.loadingList = loadingList;
      this.all_img_arr = all_img_arr;
      this.pageScrollToBottom();
      if (data.send_user_id == this.receive_user_id) {
        app.ws_send({
          type: 'setread',
          session_id: this.session_id,
          receive_user_id: this.receive_user_id
        });
      }
    },
    // 获取容器高度，使页面滚动到容器底部--------------------有问题
    pageScrollToBottom: function() {
      uni.createSelectorQuery().select('#j_page').boundingClientRect(function(rect) {
        // 使页面滚动到底部
        // console.log(rect.height)
        uni.pageScrollTo({
          scrollTop: rect.height
        })
      }).exec()
    }
  }
}; //插入
//为字符串插入字符 其中soure为原字符串,start为将要插入字符的位置，newStr为要插入的字符

function insertStr(soure, start, newStr) {
  return soure.slice(0, start) + newStr + soure.slice(start);
}
</script>
<style>
/* pages/chat/chat.wxss */
.df {
  display: flex;
  display: -webkit-flex;
}

.flexwa {
  flex-wrap: wrap;
}

.container {
  background-color: #f6f7fa;
}

.coversation {
  padding: 30rpx 30rpx 120rpx;
}

.coversation.pdbot {
  padding: 220rpx 30rpx 420rpx;
}

.kefu_imgbox {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20rpx;
  float: left;
}

.kefu_imgbox image {
  width: 80rpx;
  height: 80rpx;
}

.kefu_dialog {
  background-color: rgb(255, 255, 255);
  border-radius: 0 20rpx 20rpx 20rpx;
  padding: 20rpx 30rpx;
  float: left;
  position: relative;
  font-size: 28rpx;
  max-width: 500rpx;
  font-size: 28rpx;
  word-break: break-all;
  overflow: hidden;
}

.commen_problem {
  color: #8cc2e6;
  text-decoration: underline;
  padding-top: 20rpx;
  font-size: 26rpx;
}

.user_imgbox {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-left: 20rpx;
  float: right;
}

.user_imgbox image {
  width: 80rpx;
  height: 80rpx;
}

.user_dialog {
  background-color: #0091ff;
  border-radius: 20rpx 0 20rpx 20rpx;
  padding: 20rpx 30rpx;
  float: right;
  position: relative;
  font-size: 28rpx;
  color: #fff;
  max-width: 500rpx;
  word-break: break-all;
  display: flex;
  overflow: hidden;
}

.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

.kefu_box {
  margin-top: 60rpx;
}

.user_box {
  margin-top: 60rpx;
}

.shuru_box {
  min-height: 100rpx;
  border-top: 1px solid #e6e6e6;
  left: 0;
  right: 0;
  display: flex;
  padding: 0 30rpx;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
}

.icon_add {
  width: 40rpx;
  height: 40rpx;
  margin: 0 25rpx;
}

.icon_send {
  width: 41rpx;
  height: 32rpx;
}

button {
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: inherit !important;
  display: flex;
  align-items: center;
}

.input_box {
  padding: 0 20rpx;
  background: #f7f7f7;
  height: 64rpx;
  flex: 1;
}

.input_box input {
  background: #f7f7f7;
  line-height: 64rpx;
  height: 64rpx;
  font-size: 28rpx;
}

.placeholder {
  color: #bfbfbf;
  font-size: 28rpx;
}

.date_box_b {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20rpx 0 0;
}

.date_box {
  padding: 9rpx 17rpx;
  border-radius: 50rpx;
  background: #f5f5f5;
  font-size: 22rpx;
  color: #333;
  display: inline-block;
  margin: 0 auto;
}

.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  .bottom {
    padding-bottom: 34px;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

.changyong {
  width: 116rpx;
  height: 68rpx;
  background: #0091ff;
  border-radius: 8rpx;
  line-height: 68rpx;
  text-align: center;
  color: #fff;
  font-size: 28rpx;
  margin-right: 20rpx;
}

.changyonglist {
  max-height: 300rpx;
  overflow-y: scroll;
  background-color: #fff;
}

.changyongitem {
  overflow: hidden;
  border-bottom: 1px solid #f5f5f5;
  padding: 30rpx;
  color: #333;
}

.emotionslist {
  max-height: 300rpx;
  overflow-y: scroll;
  background-color: #fff;
}

.emotionsitem {
  overflow: hidden;
  border-bottom: 1px solid #f5f5f5;
  padding: 30rpx;
  color: #333;
}

.houseitem {
  background-color: #fff;
  width: 100%;
}

/* .houseitem{padding:30rpx 40rpx ;background-color: #fff;position: fixed;top: 0;left: 0;right: 0;z-index: 20;} */
.houseitem .houseimg {
  width: 240rpx;
  height: 190rpx;
  border-radius: 10rpx;
}

.housename {
  font-size: 30rpx;
  color: #000;
}

.area-size {
  font-size: 18rpx;
  color: #898989;
}

.area-size text {
  display: block;
  font-size: 20rpx;
}

.targetbox {
  padding: 14rpx 0 0;
  white-space: nowrap;
  overflow-x: scroll;
}

.targetitem {
  display: inline-block;
  padding: 2rpx 4rpx;
  background: #cce9ff;
  font-size: 18rpx;
  color: #0091ff;
  border-radius: 2rpx;
  margin-right: 10rpx;
  margin-bottom: 12rpx;
}

.housecost {
  color: #f8532f;
  font-size: 24rpx;
  font-weight: bold;
  lighting-color: 28rpx;
}

.housecost text {
  font-size: 34rpx;
  margin-right: 10rpx;
}

.event {
  padding-top: 11rpx;
  font-size: 18px;
  color: #898989;
}

.event .bao {
  width: 26rpx;
  text-align: center;
  line-height: 26rpx;
  font-size: 18rpx;
  height: 26rpx;
  border-radius: 5rpx;
  background: linear-gradient(180deg, #00c4ff, #0091ff);
  color: #fff;
  margin-right: 10rpx;
}

.event .dong {
  width: 26rpx;
  text-align: center;
  line-height: 26rpx;
  font-size: 18rpx;
  height: 26rpx;
  border-radius: 5rpx;
  background: linear-gradient(270deg, #ff6635, #ffb45c);
  color: #fff;
  margin-right: 10rpx;
}

.event .hot {
  width: 26rpx;
  text-align: center;
  line-height: 26rpx;
  font-size: 18rpx;
  height: 26rpx;
  border-radius: 5rpx;
  background: linear-gradient(270deg, #ff5232 0%, #ff6635 100%);
  color: #fff;
  margin-right: 10rpx;
}

.houseimgbox {
  margin-right: 15rpx;
  width: 240rpx;
  height: 190rpx;
  position: relative;
}

.houseimgbox .label_box {
  position: absolute;
  top: 15rpx;
  left: 15rpx;
  z-index: 3;
  padding: 0 5rpx;
  background-color: #ff7b40;
  color: #fff;
  font-size: 22rpx;
  height: 30rpx;
  line-height: 30rpx;
  border-radius: 5rpx;
}

.typebox {
  height: 25rpx;
  line-height: 25rpx;
  padding: 0 5rpx;
  color: #c6c6c6;
  border: 1px solid #c6c6c6;
  font-size: 20rpx;
  border-radius: 5rpx;
  margin-left: 10rpx;
}

.icon_collect {
  width: 26rpx;
  height: 25rpx;
}

.salerank {
  max-width: 400rpx;
  height: 30rpx;
  margin-bottom: 10rpx;
  line-height: 30rpx;
  font-size: 18rpx;
  color: #fff;
  display: inline-block;
  padding-right: 5rpx;
  border-radius: 5rpx;
  background: linear-gradient(180deg, #f0dec0 0%, #dcba8c 100%);
}

.rankimg {
  width: 16rpx;
  height: 16rpx;
  margin: 0 5rpx;
}

.ranks {
  font-size: 18rpx;
}

.collects {
  position: fixed;
  top: 0;
  right: 20rpx;
  width: 404rpx;
  height: 97rpx;
  z-index: 99;
}

.emoji {
  width: 40rpx;
  height: 40rpx;
}

.file_pics {
  max-width: 440rpx;
}

.emotionslist .emotion {
  width: 60rpx;
  height: 60rpx;
}
</style>
